<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Vue.js实现的3D Tab菜单DEMO演示</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Oswald:300,400,700" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='css/vue-tabs.css'><link rel="stylesheet" href="css/vuejs-3d-tab-menu-style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div id="app-container" data-tilt >
  <div id="app">
    <vue-tabs id="tabs">
      <v-tab title="First Tab" class="tab" :selected="true">
        <div class="tab-content">
          <div class="tab-image first-image"></div>
          <div class="tab-content-text">
            <h1>First Header</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt nu aliqua. Sollicit udin purus faucibus ornare aliquam ultrices sagittis orci a scelerisque a consectetur atna purus.</p>
          </div>
        </div>
      </v-tab>

      <v-tab title="Second Tab" class="tab">
        <div class="tab-content">
          <div class="tab-image second-image"></div>
          <div class="tab-content-text">
            <h1>Second Header</h1>
            <p>Ac tortor vitae purus faucibus ornare suspendisse uis tristique sed nisi. Consectetur libero id ax faucibus in ornare faucibus nislt udin purus fi faucibus ac ornare aliquam ultrices in purus faucibu.</p>
          </div>
        </div>
      </v-tab>

      <v-tab title="Third Tab" class="tab">
        <div class="tab-content">
          <div class="tab-image third-image"></div>
          <div class="tab-content-text">
            <h1>Third Header</h1>
            <p>Scelerisque fermentum dui faucibus in ornare id. Amet consectetur adipiscing elit duis tristique sollicitudin purus faucibus ornare aliquam ultrices sagittis nibh elit duis nubro tristique itae purus faucibus.</p>
          </div>
        </div>
      </v-tab>
    </vue-tabs>

  </div>

</div>

<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>

<!-- partial -->
  <script src='js/vue.min.js'></script>
<script src='js/bootstrap.min.js'></script>
<script src='js/vue-tabs.js'></script>
<script src='js/vanilla-tilt.min.js'></script><script  src="js/vuejs-3d-tab-menu-script.js"></script>

</body>
</html>
